<template>
	<el-container>
		<el-header>
			<div class="left-panel">
                <el-button type="warning" plain v-auth="'procure.export'" @click="exportExport">导出</el-button>
                <!-- <div class="finish">
                    <div class="finishNum">销售总额:<div class="text">{{total_money}}</div></div>
                </div> -->
                <div class="finish">
                    <div class="finishNum">客户期初应收:<div class="text">{{total_money}}</div></div>
                </div>
            </div>
			<div class="right-panel">
				<div class="right-panel-search">
                    <el-date-picker v-model="search.all_time" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 230px"/>
                    <el-select v-model="search.customer_id" placeholder="请选择客户" filterable clearable @change="getData">
                        <el-option v-for="item in clientList" :key="item.id" :label="item.customer_name" :value="item.id"></el-option>
                    </el-select>
                    <el-select v-model="search.order_type" placeholder="请选择单据类型" clearable>
                        <el-option label="销售单" :value="1"></el-option>
                        <el-option label="收款单" :value="2"></el-option>
                    </el-select>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
					<el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<!-- <scTable ref="table" :apiObj="apiObj" row-key="id" hidePagination show-summary remoteSort remoteFilter> -->
            <scTable ref="table" :apiObj="apiObj" row-key="id" remoteSort remoteFilter hidePagination show-summary :summary-method="getAll">
				<el-table-column label="#" type="index" width="70" align="center"></el-table-column>
				<el-table-column label="客户编号" align="center">
                    <template #default="scope">
                        {{scope.row.customer_code}}
                    </template>
                </el-table-column>
				<el-table-column label="客户名称" prop="customer_name" align="center" sortable></el-table-column>
                <!-- <el-table-column label="期初应收" prop="customer.collect_price" align="center"></el-table-column> -->
				<el-table-column label="单据编号" prop="order_code" align="center"></el-table-column>
				<el-table-column label="开单日期" prop="business_date" align="center" sortable></el-table-column>
				<!-- <el-table-column label="收款方式" prop="end_money" align="center"></el-table-column> -->
				<el-table-column label="单据类型" align="center">
                    <template #default="scope">
                        {{scope.row.contract_id ? '销售单' : '收款单'}}
                    </template>
                </el-table-column>
				<!-- <el-table-column label="期初应收" prop="end_money" align="center"></el-table-column> -->
				<el-table-column label="本期应收" prop="money" align="center"></el-table-column>
				<el-table-column label="本期已收" prop="pay_money" align="center"></el-table-column>
				<el-table-column label="期末应收" prop="only_money" align="center"></el-table-column>
				<el-table-column label="经办人" prop="create_staff_name" align="center"></el-table-column>
				<el-table-column label="备注" prop="remark" align="center"></el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
	export default {
		name: '销售报表',
		components: {
		},
		data() {
			return {
				apiObj: this.$API.table.sale,
				clientList:[],
                search: {
                    customer_id: null,
                    all_time: null,
                    order_type: null
                },
                data: [],
                selection: [],
                total_money: "",
                money: "",
                pay_money: "",
                only_money: "",
			}
		},
        mounted() {
            // this.getData()
            this.getClient()
        },
		methods: {
            selectionChange(selection) {
                this.selection = selection;
            },
            async exportExport(){
                var res = await this.$API.table.saleExport.post(this.search);
                if (res.code == 1) {
                    const fileUrl = res.data.url;
                    const link = document.createElement("a");
                    link.href = fileUrl;
                    link.download = fileUrl;
                    link.click();
                } else {
                    this.$alert(res.message, "提示", { type: "error" });
                }
            },
			// 数据列表
            async getData(){
                this.data = []
                this.total_money = ""
                var res = await this.$API.table.sale.get(this.search)
                this.data = res.data
                if(this.search.customer_id){
                    this.total_money = res.show
                }
                let a = 0
                let b = 0
                res.data.map(item=>{
                    a = Number(item.money) + a;
                    b = Number(item.pay_money) + b;
                })
                this.money = (a).toFixed(2)
                this.pay_money = (b).toFixed(2)
                if(res.data.length > 0){
                    let lenght = res.data.length - 1
                    this.only_money = (res.data[lenght].only_money).toFixed(2)
                }
            },
            // 客户列表
            async getClient(){
                var res = await this.$API.client.client.all.get();
                this.clientList = res.data
            },
			upsearch(){
                this.$refs.table.upData(this.search)
                // this.getData(this.search)
			},
            refresh() {
                for (const key in this.search) {
                    this.search[key] = null;
                }
                // this.getData()
                this.$refs.table.upData(this.search)
                this.total_money = ""
                this.money = ""
                this.pay_money = ""
                this.only_money = ""
            },
            getAll(param){
                const { columns, data } = param
                var sums = []
                columns.forEach((column, index) => {
                    sums[index] = 0
                    if(column.property != undefined){
                        data.map((item) => {
                            sums[index] += Number(item[column.property])
                        })
                    }
                    if (index === 0) {
                        sums[index] = '合计'
                        return
                    }
                    if (index === 1 || index === 2 || index === 3 || index === 4 || index === 5 || index === 9 || index === 10 ) {
                        sums[index] = ''
                        return
                    }
                    if (index === 6) {
                        sums[index] = ` 本期应收: \r\n ${this.money}`
                    }
                    if (index === 7) {
                        sums[index] = `本期已收: \r\n ${this.pay_money}`
                    }
                    if (index === 8) {
                        sums[index] = `期末应收: \r\n ${this.only_money}`
                    }
                })
                return sums
            },
		}
	}
</script>

<style lang="scss" scoped>
::v-deep .el-table .el-table__footer-wrapper tr td {
    border-bottom: 0.1px solid #999;
    color: red;
    font-size: 16px;
}
</style>
